<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 同类型链式操作:  调用方法后的返回值还是相同类型的数据(新的/原本的)

    // var arr = []
    // var result = arr.concat(1, 2).concat(3, 4).concat(5, 6);
    // console.log(result);

    // var str = "YYYY-MM-DD";
    // var result = str.replace("YYYY", "2023").replace("MM", "10").replace("DD", "20")
    // console.log(result);

    // var s = new Set();
    // s.add(1).add(2).add(3);
    // console.log(s);



</script>
<script>
    // Promise实例(对象)的链式操作:
    // 原理: then() catch() 方法的返回值也是一个Promise实例 (新的Promise实例)

    // 小结:
    // (1) then()方法中如果不指定成功和失败时的回调函数,那么等Promise实例状态改变之后,其状态和存储的数据会依次向后传递
    // (2) then方法可以依次指定多个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数(前提: 返回值不是Promise实例), 如果返回值是一个新的Promise实例,等该Promise实施状态改变之后,再向后传递

    // 成功就走then(),失败走catch, 一失足成千古恨
    // catch捕获整个链式操作过程中所有的错误


    // 链式用法3:
    // promise实例状态为已成功(fulfilled)时,才会执行then()方法中成功的回调, 由于没有指定已失败状态的回调函数,Promise实例失败的状态和存储数据会直接向后传递,最终被catch 捕获=> catch捕获整个链式操作过程中所有的错误


    // 多个异步操作相互依赖的情况
    var p = new Promise(function (resolve, reject) {
        setTimeout(() => {
            resolve(1);
            console.log("异步代码执行完毕", p);
        }, 2000)
    })
    console.log(1, p);  // {<pending>:undefined}   2s后会变为  {<fulfilled>:1}

    // 成功就走then(),失败走catch, 一失足成千古恨
    p.then(function (arg) {
        console.log("fulfilled", arg); // 1
        // return 2;  // 返回值非Promise实例 => 直接向后传递
        return new Promise(function (resolve, reject) { // 返回值是Promise实例 {<pending>:undefined}  =>  1s后变为 {<fulfilled>:2}
            setTimeout(() => {
                reject(2)
            }, 1000);
        })
    }).then(function (arg) {
        console.log("fulfilled", arg); // 2
        return new Promise(function (resolve, reject) { // 返回值是Promise实例 {<pending>:undefined}  =>  1s后变为 {<fulfilled>:2}
            setTimeout(() => {
                resolve(3)
            }, 3000);
        });
    }).then(function (arg) {
        console.log("fulfilled", arg); // 3
    }).catch(function (arg) {
        console.log("rejected", arg);
    })


    console.log("同步代码执行完毕", p);

</script>

</html>